<!--
 * @Author: yuanlai
 * @Date: 2025-07-07 10:06:49
 * @LastEditors: lisong
 * @LastEditTime: 2025-07-07 10:57:12
 * @Description: echarts飞线图
-->
<template>
  <div class="container">
    <div class="flex-center">
      <h3>echarts飞线图</h3>
      <el-select v-model="active">
        <el-option value="0" label="中国地图"></el-option>
        <el-option value="1" label="世界地图"></el-option>
      </el-select>
    </div>
    <EchartsFlyingLine :options="flyOptions" />
  </div>
</template>

<script>
import EchartsFlyingLine from "@/components/EchartsFlyingLine";
export default {
  components: {
    EchartsFlyingLine,
  },
  data() {
    return {
      active: "0",
    };
  },
  computed: {
    flyOptions() {
      if (this.active === "0") {
        return {
          ...this.chinaData,
          map: "china",
        };
      } else {
        return {
          ...this.worldData,
          map: "world",
        };
      }
    },
  },
  methods: {
    chinaData() {
      return {
        from: [{ name: "成都", value: [104.08347, 30.657689, 10] }],
        to: [
          { name: "上海", value: [121.4737, 31.2304, 2] },
          { name: "北京", value: [116.4074, 39.9042, 2] },
          { name: "武汉", value: [114.298572, 30.584355, 2] },
          { name: "广州", value: [113.2647, 23.1117, 2] },
          { name: "香港", value: [114.16, 22.28, 2] },
        ],
        lines: [
          {
            fromName: "成都",
            toName: "上海",
            coords: [
              [104.08347, 30.657689],
              [121.4737, 31.2304],
            ],
          },
          {
            fromName: "成都",
            toName: "北京",
            coords: [
              [104.08347, 30.657689],
              [116.4074, 39.9042],
            ],
          },
          {
            fromName: "成都",
            toName: "武汉",
            coords: [
              [104.08347, 30.657689],
              [114.298572, 30.584355],
            ],
          },
          {
            fromName: "成都",
            toName: "广州",
            coords: [
              [104.08347, 30.657689],
              [113.2647, 23.1117],
            ],
          },
          {
            fromName: "成都",
            toName: "香港",
            coords: [
              [104.08347, 30.657689],
              [114.16, 22.28],
            ],
          },
        ],
      };
    },
    worldData() {
      return {
        from: [{ name: "香港", value: [114.109497, 22.396428, 10] }],
        to: [
          {
            name: "河内",
            value: [105.85, 21.03, 2],
          },
          {
            name: "曼谷",
            value: [100.52, 13.75, 2],
          },
          {
            name: "吉隆坡",
            value: [101.687, 3.13829, 2],
          },
          {
            name: "雅加达",
            value: [106.8, 6.1667, 2],
          },
          {
            name: "马尼拉",
            value: [120.58, 14.35, 2],
          },
          {
            name: "利雅得",
            value: [46.71, 24.65, 2],
          },
          {
            name: "阿拉木图",
            value: [76.8428, 43.3267, 2],
          },
          {
            name: "塔什干",
            value: [69.2725, 41.4942, 2],
          },
          {
            name: "内罗毕",
            value: [36.49, 1.17, 2],
          },
          {
            name: "拉各斯",
            value: [3.4042, 6.4617, 2],
          },
          {
            name: "开罗",
            value: [31.5511, 30.0231, 2],
          },
        ],
        lines: [
          {
            fromName: "成都",
            toName: "河内",
            coords: [
              [114.109497, 22.396428],
              [105.85, 21.03],
            ],
          },
          {
            fromName: "成都",
            toName: "曼谷",
            coords: [
              [114.109497, 22.396428],
              [100.52, 13.75],
            ],
          },
          {
            fromName: "成都",
            toName: "吉隆坡",
            coords: [
              [114.109497, 22.396428],
              [101.687, 3.13829],
            ],
          },
          {
            fromName: "成都",
            toName: "雅加达",
            coords: [
              [114.109497, 22.396428],
              [106.8, 6.1667],
            ],
          },
          {
            fromName: "成都",
            toName: "马尼拉",
            coords: [
              [114.109497, 22.396428],
              [120.58, 14.35],
            ],
          },
          {
            fromName: "成都",
            toName: "利雅得",
            coords: [
              [114.109497, 22.396428],
              [46.71, 24.65],
            ],
          },
          {
            fromName: "成都",
            toName: "阿拉木图",
            coords: [
              [114.109497, 22.396428],
              [76.8428, 43.3267],
            ],
          },
          {
            fromName: "成都",
            toName: "塔什干",
            coords: [
              [114.109497, 22.396428],
              [69.2725, 41.4942],
            ],
          },
          {
            fromName: "成都",
            toName: "内罗毕",
            coords: [
              [114.109497, 22.396428],
              [36.49, 1.17],
            ],
          },
          {
            fromName: "成都",
            toName: "拉各斯",
            coords: [
              [114.109497, 22.396428],
              [3.4042, 6.4617],
            ],
          },
          {
            fromName: "成都",
            toName: "开罗",
            coords: [
              [114.109497, 22.396428],
              [31.5511, 30.0231],
            ],
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .flex-center {
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 9999;
    top: 16px;
  }
}
</style>
